<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { usePhotoStore } from '../stores/photo'
import { deletePhoto } from '../api/photo'
import { showToast, showDialog, showConfirmDialog } from 'vant'
import PhotoSwip from 'photoswipe';
import 'photoswipe/dist/photoswipe.css';

const router = useRouter()
const photoStore = usePhotoStore()
let photoswipe = null

const formatFileSize = (bytes) => {
  if (!bytes) return '0 MB'
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
}

const formatDateTime = (isoString) => {
  if (!isoString) return '-'
  return isoString.replace('T', ' ').split('.')[0]
}

const initPhotoSwipe = async () => {
  const dataSource = photoStore.photoList.filter(item => item.isPic)
  const delfunc = async () => {
    await showConfirmDialog({
      title: '不可恢复',
      message: `确定要删除这张照片吗？`,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      zIndex: 110000,
    })
    const res = await deletePhoto([photoStore.currentPhoto.url])
    if (res.success) {
      showToast('删除成功')
      photoStore.removePhotos([photoStore.currentPhoto.url])
      router.back()
    } else {
      showToast('删除失败')
    }
  };
  const showInfo = () => {
    const currentPhoto = dataSource[photoswipe.currIndex]
    showDialog({
      message: `
        <div class="info-dialog">
          <div><span>时间：</span><span>${formatDateTime(currentPhoto.shootTime)}</span></div>
          <div><span>路径：</span><span>${currentPhoto.url}</span></div>
          <div><span>大小：</span><span>${formatFileSize(currentPhoto.size)}</span></div>
          <div><span>尺寸：</span><span>${currentPhoto.width} × ${currentPhoto.height}</span></div>
        </div>
      `,
      messageAlign: 'center',
      zIndex: 110000,
      closeOnClickOverlay: true,
      showConfirmButton: false,
      allowHtml: true
    })
  }

  const options = {
    pswpElement: document.querySelector('.pswp-container'),
    dataSource: dataSource.filter(item => !item.isDirectory).map(item => { item.src = item.url; return item;}),
    index: dataSource.findIndex(p => p.url === photoStore.currentPhoto.url),
    history: false,
    closeOnVerticalDrag: false,
    showHideAnimationType:'none',
    zoom: false,
    pswpModule: () => import('photoswipe'),
    close: false,
  }

  photoswipe = new PhotoSwip(options)
  // 监听缩放关闭事件
  photoswipe.on('pinchClose', () => {
    router.back()
  })
  photoswipe.on('uiRegister', function() {
    photoswipe.ui.registerElement({
      name: 'photoDate',
      order: 1,
      isButton: false,
      appendTo: 'bar',
      html: '<div class="photo-date"></div>'
    });
    photoswipe.ui.registerElement({
      name: 'delete',
      order: 9,
      isButton: true,
      html: `<svg t="1745908716501" class="pswp__icn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2637" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M765.505691 191.942567 639.627772 191.942567c0-35.32453-28.636201-63.960731-63.960731-63.960731L447.74558 127.981836c-35.32453 0-63.960731 28.636201-63.960731 63.960731L257.905908 191.942567c-36.452213 0-66.00325 29.551036-66.00325 66.00325l0 59.875692c0 36.452213 29.551036 66.00325 66.00325 66.00325l-2.042519 0 0 445.681572c0 36.452213 29.551036 66.00325 66.00325 66.00325l61.918211 0 63.960731 0 127.921461 0 63.960731 0 61.918211 0c36.452213 0 66.00325-29.551036 66.00325-66.00325L767.549234 383.823736l-2.042519 0c36.452213 0 66.00325-29.551036 66.00325-66.00325l0-59.875692C831.508941 221.49258 801.958928 191.942567 765.505691 191.942567zM703.58748 803.413046c-0.101307 3.123131-1.743714 27.813462-27.961842 28.134781l-35.998889 0-63.960731 0L447.74558 831.547827 383.78485 831.547827l-35.879162 0c-27.988448-0.343831-27.969005-28.459169-27.969005-28.459169l-0.112564 0.031722L319.824119 383.823736l383.76336 0L703.58748 803.413046zM735.567845 319.863005 287.843754 319.863005c-17.662265 0-31.980365-14.3181-31.980365-31.980365 0-17.662265 14.3181-31.980365 31.980365-31.980365l159.901827 0 127.921461 0 159.901827 0c17.662265 0 31.980365 14.3181 31.980365 31.980365C767.54821 305.544905 753.23011 319.863005 735.567845 319.863005z" p-id="2638"></path><path d="M447.74558 767.588119c17.662265 0 31.980365-14.3181 31.980365-31.980365L479.725946 479.764831c0-17.662265-14.3181-31.980365-31.980365-31.980365-17.662265 0-31.980365 14.3181-31.980365 31.980365l0 255.842922C415.765215 753.270019 430.083316 767.588119 447.74558 767.588119z" p-id="2639"></path><path d="M575.667042 767.588119c17.662265 0 31.980365-14.3181 31.980365-31.980365L607.647407 479.764831c0-17.662265-14.3181-31.980365-31.980365-31.980365-17.662265 0-31.980365 14.3181-31.980365 31.980365l0 255.842922C543.686676 753.270019 558.004777 767.588119 575.667042 767.588119z" p-id="2640"></path></svg>`,
      onClick: delfunc
    });
    photoswipe.ui.registerElement({
      name: 'info',
      order: 8,
      isButton: true,
      html: `<svg t="1745981355696" class="pswp__icn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2632" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="2633"></path><path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="2634"></path><path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="2635"></path></svg>`,
      onClick: showInfo
    });
  });
  
  // 监听图片切换事件
  photoswipe.on('change', () => {
    const currentPhoto = dataSource[photoswipe.currIndex]
    photoStore.setCurrentPhoto(currentPhoto)
    // 更新拍摄时间显示
    const photoDateElement = document.querySelector('.photo-date')
    if (photoDateElement) {
      photoDateElement.textContent = formatDateTime(currentPhoto.shootTime || '')
    }
  })
  
  photoswipe.init()
}

onMounted(() => {
  initPhotoSwipe()
})

onBeforeUnmount(() => {
  if (photoswipe) {
    photoswipe.destroy()
    photoswipe = null
  }
})
</script>

<template>
  <div class="pswp-container"></div>
</template>

<style>
.pswp-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1500;
}

.pswp__counter{
  display: none;
}

.photo-date{
  line-height: 60px;
  padding: 0 10px;
  color: #ddd;
}
.info-dialog{
  white-space: nowrap;
  text-align: left;
}
</style>